import React, { memo, useEffect, useState, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getBanner } from "../../store/actionType";

import { BannerLeft, BannerRight, BannerWrapper } from "./style";

import { Carousel } from "antd";
import { NavLink } from "react-router-dom";

export default memo(function BannerTop() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const dispatch = useDispatch();

  const carouselRef = useRef();

  const state = useSelector(
    (state) => ({
      banners: state.getIn(["recommend", "bannerTop"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getBanner());
  }, [dispatch]);

  const bannerChange = useCallback((from, to) => {
    setTimeout(() => {
      setCurrentIndex(to);
    }, 0);
  }, []);

  const bgImage =
    state.banners[currentIndex] &&
    state.banners[currentIndex].imageUrl + "?imageView&blur=40x20";

  document.title = `网易云音乐`;

  //  (state.banners)

  return (
    <BannerWrapper bgImage={bgImage}>
      <div className="wrap-v2 banner">
        <BannerLeft>
          <Carousel
            ref={carouselRef}
            beforeChange={bannerChange}
            autoplay
            effect="fade"
          >
            {state.banners.map((item, index) => {
              return (
                <div className="banner-item" key={item.imageUrl}>
                  {item.typeTitle === "新歌首发" ? (
                    <NavLink
                      to={{
                        pathname: "/song",
                        search: "?id=" + item.encodeId,
                      }}
                    >
                      <img
                        className="image"
                        src={item.imageUrl}
                        alt={item.typeTitle}
                      />
                    </NavLink>
                  ) : item.typeTitle === "新碟首发" ? (
                    <NavLink
                      to={{
                        pathname: "/album",
                        search: "?id=" + item.encodeId,
                      }}
                    >
                      <img
                        className="image"
                        src={item.imageUrl}
                        alt={item.typeTitle}
                      />
                    </NavLink>
                  ) : (
                    <img
                      className="image"
                      src={item.imageUrl}
                      alt={item.typeTitle}
                    />
                  )}
                </div>
              );
            })}
          </Carousel>
          <button
            onClick={(e) => carouselRef.current.prev()}
            className="banner-left-btn banner_sprite"
          ></button>
          <button
            onClick={(e) => carouselRef.current.next()}
            className="banner-right-btn banner_sprite"
          ></button>
        </BannerLeft>
        <BannerRight></BannerRight>
      </div>
    </BannerWrapper>
  );
});
